<template>
	<view>
		<view class="content">
			<view class="add-top flex" v-for="(item,index) in addList" :key="index">
				<view class="add-icon" @click="radioGroupChange(item.id)">
					<!-- <span class="iconfont center">&#xe614;</span> -->
					<radio :id="item.id" :check="item.check" />
				</view>
				<view class="add-info">
					<view class="add-user">
						<span class="userinfo name">{{item.consigneeName}}</span>
						<span class="userinfo phone">{{item.phoneNumber}}</span>
						<u-tag text="默认地址" bg-color="#fff" size="mini" border-color="#fff" color="#00c6c2" v-if="item.isModel" />
					</view>
					<view class="add-dress province">
						<span class="userinfo">{{item.province}}</span>
						<span class="userinfo">{{item.city}}</span>
						<span class="userinfo">{{item.area}}</span>
						<span class="userinfo">{{item.address}}</span>
					</view>
				</view>
				<view class="edit-box" @click="edit()">
					<view class="add-edit">编辑</view>
				</view>
			</view>
		</view>
		<view class="bot-btn" @click="linkNewAdd">
			新增地址
		</view>
	</view>
</template>

<script>
	// import {
	// 	Updateinfo,
	// 	addressForuser
	// } from "@/api/address.js"
	export default {
		data() {
			return {
				isChecked: 0,
				addList: [{
					id: 201212,
					consigneeName: "张三",
					phoneNumber: "12345678920",
					city: "成都市",
					province: "四川省",
					area: "高新区",
					address: "天府大道中段53号",
					isModel: true,
					check: true
				}],
				btnPlus: {
					width: "690rpx",
					height: "80rpx",
					bordeRadius: "40rpx",
					background: " #00c6c2",
					fontSize: "30rpx",
					color: "#FFFFFF"
				}
			}
		},


		methods: {
			radioGroupChange(e) {
				uni.setStorageSync("nowSelectAddress", e)
				setTimeout(function() {
					uni.navigateBack({
						delta: 1
					})
				}, 500);

			},
			linkNewAdd() {
				uni.navigateTo({
					url: '/pagesB/my/editaddress'
				})
			},
			edit() {
				uni.navigateTo({
					url: '/pagesB/my/editaddress'
				})
			}
		}
	}
</script>

<style scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.content {
		width: 100%;
		border-radius: 12rpx;
		padding: 20rpx 0 0;
	}

	.add-top {
		width: 100%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.add-icon {
		width: 48rpx;
		height: 48rpx;

		border-radius: 24rpx;
		line-height: 48rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.add-info {
		width: 580rpx;
		padding-left: 20rpx;
	}

	.userinfo {
		display: inline-block;
		margin-right: 10rpx;
	}

	.name {
		color: #333333;
		font-size: 28rpx;
	}

	.phone {
		color: #333333;
		font-size: 28rpx;
	}

	.province {
		color: #999999;
		font-size: 26rpx;
	}

	.bot-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 88rpx;
		background-color: #00c6c2;
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #FFFFFF;


	}

	.plus {
		margin-right: 4rpx;
		font-size: 28rpx;
	}

	.edit-box {
		width: 80rpx;
		text-align: center;
		border-left: 1rpx solid #e5e5e5;
	}

	.add-edit {
		font-size: 30rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #333333;
	}
</style>
